<template>
  <div>
    <div class="states-type">
      <span class="type-title">数据类型:</span>
      <button
        type="button"
        class="btn btn-light rounded-pill btn-sm states-type-item"
        :class="{ isActive: siteChange == item.index }"
        v-for="item in sitetype"
        :key="item.index"
        @click="allSites(item)"
      >
        {{ item.name }}
      </button>
    </div>
    <div class="states-type">
      <span class="type-title">选择环境:</span>
      <button
        type="button"
        class="btn btn-light rounded-pill btn-sm states-type-item"
        :class="{ isActive: reptileChange == item.index }"
        v-for="item in reptiletype"
        :key="item.index"
        @click="reptile(item)"
      >
        {{ item.name }}
      </button>
    </div>
    <div class="states-time">
      <div>
        <span class="time-title">时间范围:</span>
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-time-item"
          :class="{ isActive: timeFrameChange == item.index }"
          v-for="item in timeFrame"
          :key="item.index"
          @click="statesItem(item)"
        >
          {{ item.type }}
        </button>
      </div>
    </div>
    <div class="states-time">
      <div>
        <span>选择服务器:</span>
        <select class="form-control" style="width: 200px;display: inline-block;margin-left: 10px;">
          <option>192.168.71.62（正常）</option>
        </select>
      </div>
    </div>
    <div class="states-time">
      <div>
        <span>选择数据库:</span>
        <select class="form-control .col-md-offset-2" style="width: 200px;display: inline-block;margin-left: 10px;">
          <option>company_member</option>
        </select>
      </div>
    </div>
    <Transaction />
  </div>
</template>
<script>
import Transaction from "./transaction";
export default {
  components: {
    Transaction,
  },
  data () {
    return {
      // 数据类型
      sitetype: [
        {
          name: "MySQL",
          index: 1,
        },{
          name: "ElasticSearch",
          index: 2,
        },{
          name: "MongoDB",
          index: 3,
        },{
          name: "ClickHouse",
          index: 4,
        },{
          name: "Redis",
          index: 5,
        },{
          name: "kafka",
          index: 6,
        },
      ],
      siteChange: 1,

      // 选择环境
      reptiletype: [
        {
          name: "测试环境",
          index: 1,
        },{
          name: "正式环境",
          index: 2,
        },{
          name: "暂存环境",
          index: 3,
        },
      ],
      reptileChange: 1,
      // 时间范围
      timeFrame: [
        {
          type: "7天",
          index: 1,
        },{
          type: "15天",
          index: 2,
        },{
          type: "30天",
          index: 3,
        },
      ],
      timeFrameChange: 1,
    }
  },
  methods: {
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    // 爬虫类型
    reptile(item) {
      this.reptileChange = item.index;
    },
    //类型筛选
    statesItem(item) {
      this.timeFrameChange = item.index;
    },
    
  }
}
</script>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 80px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.row{
  .el-input__inner{
    width: 100%;
    height: 1.7rem;
    padding: 0rem 0.75rem;
    line-height: 1.7rem;
    ::v-deep .el-input__icon,::v-deep .el-range-separator{
      line-height: 1.7rem;
    }
  }
}
.states-time{
  input,select{
    height: 1.7rem;
    padding: 0rem 0.75rem;
  }
}
</style>
